import React from "react";
import Router from "@/routers";
import { ConfigProvider, theme, App as AppProvider } from "antd";
import { HappyProvider } from "@ant-design/happy-work-theme";
import { useShallow } from "zustand/react/shallow";
import { useGlobalStore } from "@/store/global";

const App: React.FC = () => {
  const { colorPrimary, isDark, isHappy } = useGlobalStore(useShallow((state) => ({ colorPrimary: state.colorPrimary, isDark: state.isDark, isHappy: state.isHappy })));

  return (
    <ConfigProvider theme={{ token: { colorPrimary }, algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
      <HappyProvider disabled={!isHappy}>
        <AppProvider>
          <Router />
        </AppProvider>
      </HappyProvider>
    </ConfigProvider>
  );
};

export default App;
